<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深色科技风前端设计规范</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* 颜色规范 */
            --primary-bg: #0f172a;       /* 主背景色 */
            --secondary-bg: #1e293b;     /* 次要背景色 */
            --card-bg: #1a2435;          /* 卡片背景色 */
            --accent: #5eead4;           /* 强调色 */
            --accent-hover: #88f3e2;     /* 强调悬停色 */
            --danger: #f87171;           /* 危险色 */
            --warning: #fbbf24;          /* 警告色 */
            --success: #34d399;          /* 成功色 */
            --info: #60a5fa;             /* 信息色 */
            --text-primary: #e2e8f0;     /* 主要文字色 */
            --text-secondary: #94a3b8;   /* 次要文字色 */
            --text-tertiary: #64748b;    /* 三级文字色 */
            --border-color: #334155;     /* 边框色 */
            
            /* 字体规范 */
            --font-main: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-mono: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
            
            /* 间距规范 */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
            --spacing-xxl: 48px;
            
            /* 圆角规范 */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-full: 9999px;
            
            /* 阴影规范 */
            --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
            --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.25);
            --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.3);
            --shadow-accent: 0 0 8px rgba(94, 234, 212, 0.3);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: var(--primary-bg);
            color: var(--text-primary);
            font-family: var(--font-main);
            font-size: 16px;
            line-height: 1.6;
            padding: var(--spacing-md);
            min-height: 100vh;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(30, 41, 59, 0.6) 0%, transparent 25%),
                radial-gradient(circle at 90% 80%, rgba(94, 234, 212, 0.08) 0%, transparent 25%);
        }
        
        /* 布局规范 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--spacing-md);
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: var(--spacing-xl);
            margin: var(--spacing-xl) 0;
        }
        
        .section {
            margin-bottom: var(--spacing-xl);
            padding: var(--spacing-lg);
            background: var(--secondary-bg);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
        }
        
        .section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--accent), transparent);
            opacity: 0.7;
        }
        
        .card {
            background: var(--card-bg);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
            border-color: rgba(94, 234, 212, 0.2);
        }
        
        /* 标题规范 */
        h1, h2, h3, h4 {
            font-weight: 600;
            margin-bottom: var(--spacing-md);
            color: var(--text-primary);
        }
        
        h1 {
            font-size: 2.5rem; /* 40px */
            text-align: center;
            padding: var(--spacing-lg) 0;
            position: relative;
            letter-spacing: -0.5px;
        }
        
        h1::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background: var(--accent);
            margin: var(--spacing-sm) auto;
            border-radius: 2px;
            opacity: 0.7;
        }
        
        h2 {
            font-size: 1.8rem; /* 28.8px */
            margin-top: var(--spacing-lg);
            position: relative;
            padding-left: var(--spacing-md);
        }
        
        h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 12px;
            width: 4px;
            height: 24px;
            background: var(--accent);
            border-radius: 2px;
        }
        
        h3 {
            font-size: 1.3rem; /* 20.8px */
            margin: var(--spacing-md) 0;
            color: var(--accent);
        }
        
        h4 {
            font-size: 1.1rem; /* 17.6px */
            color: var(--text-secondary);
            margin-top: var(--spacing-lg);
        }
        
        p {
            color: var(--text-secondary);
            margin-bottom: var(--spacing-md);
            font-size: 1rem; /* 16px */
            line-height: 1.7;
        }
        
        .text-small {
            font-size: 0.875rem; /* 14px */
            color: var(--text-tertiary);
        }
        
        .text-muted {
            color: var(--text-tertiary);
        }
        
        /* 按钮规范 */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-sm);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            font-family: var(--font-main);
            font-size: 1rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            gap: 8px;
        }
        
        .btn-primary {
            background: rgba(94, 234, 212, 0.2);
            color: #ffffff;
            border: 1px solid rgba(94, 234, 212, 0.4);
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
        
        .btn-primary:hover {
            background: rgba(94, 234, 212, 0.3);
            box-shadow: var(--shadow-accent);
        }
        
        .btn-secondary {
            background: rgba(148, 163, 184, 0.15);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        
        .btn-secondary:hover {
            background: rgba(148, 163, 184, 0.25);
            color: #ffffff;
        }
        
        .btn-danger {
            background: rgba(248, 113, 113, 0.25);
            color: #ffffff;
            border: 1px solid rgba(248, 113, 113, 0.4);
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
        
        .btn-danger:hover {
            background: rgba(248, 113, 113, 0.35);
            box-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
        }
        
        .btn-success {
            background: rgba(52, 211, 153, 0.2);
            color: #ffffff;
            border: 1px solid rgba(52, 211, 153, 0.4);
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
        
        .btn-success:hover {
            background: rgba(52, 211, 153, 0.3);
            box-shadow: 0 0 8px rgba(52, 211, 153, 0.3);
        }
        
        .btn-outline {
            background: transparent;
            color: var(--accent);
            border: 1px solid var(--accent);
        }
        
        .btn-outline:hover {
            background: rgba(94, 234, 212, 0.1);
        }
        
        .btn-lg {
            padding: var(--spacing-md) var(--spacing-lg);
            font-size: 1.1rem;
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 0.85rem;
        }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            box-shadow: none !important;
        }
        
        .btn-group {
            display: flex;
            gap: var(--spacing-sm);
            flex-wrap: wrap;
            margin: var(--spacing-md) 0;
        }
        
        /* 表单规范 */
        .form-group {
            margin-bottom: var(--spacing-lg);
        }
        
        label {
            display: block;
            margin-bottom: var(--spacing-xs);
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .input-field, textarea, select {
            width: 100%;
            padding: var(--spacing-sm) var(--spacing-md);
            background: rgba(26, 36, 53, 0.7);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            font-family: var(--font-main);
            transition: all 0.3s ease;
        }
        
        .input-field:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.1);
        }
        
        textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .form-hint {
            font-size: 0.85rem;
            color: var(--text-tertiary);
            margin-top: var(--spacing-xs);
        }
        
        .checkbox-group, .radio-group {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            margin: var(--spacing-sm) 0;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--border-color);
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: var(--text-primary);
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: var(--accent);
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        /* 模态框规范 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.95);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
        }
        
        .modal-content {
            background: var(--secondary-bg);
            border-radius: var(--radius-md);
            width: 90%;
            max-width: 500px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            position: relative;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.4s ease;
        }
        
        .modal.show .modal-content {
            transform: translateY(0);
            opacity: 1;
        }
        
        .modal-header {
            padding: var(--spacing-md) var(--spacing-lg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-body {
            padding: var(--spacing-lg);
        }
        
        .modal-footer {
            padding: var(--spacing-md) var(--spacing-lg);
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: var(--spacing-sm);
        }
        
        .close-modal {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.3s;
            padding: var(--spacing-xs);
        }
        
        .close-modal:hover {
            color: var(--text-primary);
        }
        
        /* 通知规范 */
        .notification {
            padding: var(--spacing-md) var(--spacing-lg);
            border-radius: var(--radius-sm);
            margin: var(--spacing-md) 0;
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-md);
            border-left: 3px solid;
            background: rgba(30, 41, 59, 0.7);
        }
        
        .notification-info {
            border-color: var(--accent);
        }
        
        .notification-warning {
            border-color: var(--warning);
        }
        
        .notification-error {
            border-color: var(--danger);
        }
        
        .notification-success {
            border-color: var(--success);
        }
        
        .notification i {
            font-size: 1.2rem;
            margin-top: 2px;
        }
        
        .notification-info i {
            color: var(--accent);
        }
        
        .notification-warning i {
            color: var(--warning);
        }
        
        .notification-error i {
            color: var(--danger);
        }
        
        .notification-success i {
            color: var(--success);
        }
        
        /* 标签规范 */
        .tag {
            display: inline-block;
            padding: 4px 12px;
            border-radius: var(--radius-full);
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .tag-primary {
            background: rgba(94, 234, 212, 0.15);
            color: var(--accent);
        }
        
        .tag-secondary {
            background: rgba(148, 163, 184, 0.15);
            color: var(--text-secondary);
        }
        
        .tag-success {
            background: rgba(52, 211, 153, 0.15);
            color: var(--success);
        }
        
        /* 进度条 */
        .progress {
            height: 8px;
            background: rgba(26, 36, 53, 0.7);
            border-radius: var(--radius-full);
            overflow: hidden;
            margin: var(--spacing-md) 0;
        }
        
        .progress-bar {
            height: 100%;
            border-radius: var(--radius-full);
            transition: width 0.3s ease;
        }
        
        .progress-primary {
            background: var(--accent);
        }
        
        .progress-danger {
            background: var(--danger);
        }
        
        /* 分页 */
        .pagination {
            display: flex;
            gap: var(--spacing-sm);
            margin: var(--spacing-lg) 0;
        }
        
        .page-item {
            list-style: none;
        }
        
        .page-link {
            display: block;
            padding: 8px 16px;
            border-radius: var(--radius-sm);
            background: rgba(26, 36, 53, 0.7);
            color: var(--text-primary);
            text-decoration: none;
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }
        
        .page-link:hover {
            background: rgba(94, 234, 212, 0.1);
            border-color: rgba(94, 234, 212, 0.3);
        }
        
        .page-link.active {
            background: rgba(94, 234, 212, 0.2);
            border-color: rgba(94, 234, 212, 0.4);
            color: #ffffff;
        }
        
        /* 代码片段 */
        .code-block {
            background: rgba(26, 36, 53, 0.7);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: var(--spacing-md);
            margin: var(--spacing-md) 0;
            font-family: var(--font-mono);
            font-size: 0.9rem;
            overflow-x: auto;
        }
        
        .code-block code {
            color: var(--accent);
        }
        
        /* 页脚 */
        footer {
            text-align: center;
            padding: var(--spacing-xl) 0;
            color: var(--text-secondary);
            border-top: 1px solid var(--border-color);
            margin-top: var(--spacing-xl);
            font-size: 0.9rem;
        }
        
        /* 工具类 */
        .color-swatch {
            display: flex;
            align-items: center;
            margin-bottom: var(--spacing-sm);
        }
        
        .color-box {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-sm);
            margin-right: var(--spacing-md);
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .grid-demo {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-sm);
            margin: var(--spacing-md) 0;
        }
        
        .grid-demo > div {
            background: rgba(94, 234, 212, 0.08);
            border: 1px solid rgba(94, 234, 212, 0.15);
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }
            
            .btn-group {
                flex-direction: column;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            h2 {
                font-size: 1.5rem;
            }
        }
        
        /* 新增装饰元素 */
        .tech-pattern {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            opacity: 0.03;
            background-image: 
                linear-gradient(rgba(94, 234, 212, 0.5) 1px, transparent 1px),
                linear-gradient(90deg, rgba(94, 234, 212, 0.5) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-md);
        }
        
        .section-title i {
            color: var(--accent);
            background: rgba(94, 234, 212, 0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .spec-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: var(--spacing-md);
            margin: var(--spacing-lg) 0;
        }
        
        .spec-card {
            background: rgba(26, 36, 53, 0.5);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            border: 1px solid var(--border-color);
        }
        
        .spec-card h4 {
            color: var(--accent);
            margin-top: 0;
            margin-bottom: var(--spacing-sm);
        }
        
        .spec-card ul {
            padding-left: 20px;
            color: var(--text-secondary);
        }
        
        .spec-card li {
            margin-bottom: var(--spacing-xs);
        }
    </style>
</head>
<body>
    <div class="tech-pattern"></div>
    
    <div class="container">
        <header>
            <h1><i class="fas fa-code"></i> 深色科技风前端设计规范</h1>
            <p class="text-center">一套现代化的深色主题设计系统，专为科技类应用打造</p>
        </header>
        
        <div class="section">
            <h2>设计规范概述</h2>
            <p>本规范提供了一套完整的深色科技风前端设计指南，包含配色方案、排版系统、间距规则、UI组件等。适用于企业级应用、数据看板、技术平台等场景。</p>
            
            <div class="spec-grid">
                <div class="spec-card">
                    <h4>核心原则</h4>
                    <ul>
                        <li>深色背景降低视觉疲劳</li>
                        <li>霓虹蓝绿色作为强调色</li>
                        <li>清晰的视觉层次结构</li>
                        <li>一致的间距和圆角</li>
                        <li>微妙的科技感细节</li>
                    </ul>
                </div>
                
                <div class="spec-card">
                    <h4>开发要求</h4>
                    <ul>
                        <li>使用CSS变量实现主题化</li>
                        <li>所有尺寸使用rem单位</li>
                        <li>组件状态需完整实现</li>
                        <li>确保无障碍访问</li>
                        <li>全面响应式设计</li>
                    </ul>
                </div>
                
                <div class="spec-card">
                    <h4>性能优化</h4>
                    <ul>
                        <li>避免不必要的重绘</li>
                        <li>使用CSS过渡动画</li>
                        <li>图标使用SVG或字体图标</li>
                        <li>按需加载组件</li>
                        <li>压缩生产环境资源</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">
                <i class="fas fa-palette"></i>
                <h2>色彩规范</h2>
            </div>
            <div class="grid">
                <div class="card">
                    <div class="color-swatch">
                        <div class="color-box" style="background: var(--primary-bg);"></div>
                        <div>
                            <strong>主背景色</strong>
                            <p>#0f172a</p>
                            <p class="text-muted">body, 主容器背景</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="color-swatch">
                        <div class="color-box" style="background: var(--secondary-bg);"></div>
                        <div>
                            <strong>次要背景色</strong>
                            <p>#1e293b</p>
                            <p class="text-muted">内容区块、卡片背景</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="color-swatch">
                        <div class="color-box" style="background: var(--accent);"></div>
                        <div>
                            <strong>强调色</strong>
                            <p>#5eead4</p>
                            <p class="text-muted">按钮、链接、高亮元素</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="color-swatch">
                        <div class="color-box" style="background: var(--text-primary);"></div>
                        <div>
                            <strong>主要文字色</strong>
                            <p>#e2e8f0</p>
                            <p class="text-muted">标题、正文、按钮文字</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">
                <i class="fas fa-text-height"></i>
                <h2>排版规范</h2>
            </div>
            
            <div class="grid">
                <div class="card">
                    <h3>字体系统</h3>
                    <div class="form-group">
                        <label>主要字体</label>
                        <p>Segoe UI, SF Pro Display, -apple-system, BlinkMacSystemFont, sans-serif</p>
                    </div>
                    
                    <div class="form-group">
                        <label>等宽字体</label>
                        <p>SF Mono, Fira Code, Roboto Mono, monospace</p>
                    </div>
                    
                    <div class="form-group">
                        <label>基础字号</label>
                        <p>16px (1rem)</p>
                    </div>
                </div>
                
                <div class="card">
                    <h3>标题层级</h3>
                    <h1>H1 标题 - 2.5rem</h1>
                    <h2>H2 标题 - 1.8rem</h2>
                    <h3>H3 标题 - 1.3rem</h3>
                    <h4>H4 标题 - 1.1rem</h4>
                    
                    <div class="form-group">
                        <label>正文段落</label>
                        <p>默认字号 1rem，行高 1.6，颜色 #94a3b8</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">
                <i class="fas fa-ruler-combined"></i>
                <h2>间距与尺寸</h2>
            </div>
            
            <div class="grid">
                <div class="card">
                    <h3>间距系统 (基于8px)</h3>
                    <div class="form-group">
                        <label>xs: 4px</label>
                        <p>元素内边距、小间距</p>
                    </div>
                    
                    <div class="form-group">
                        <label>sm: 8px</label>
                        <p>按钮内边距、元素间距</p>
                    </div>
                    
                    <div class="form-group">
                        <label>md: 16px</label>
                        <p>默认间距、卡片内边距</p>
                    </div>
                    
                    <div class="form-group">
                        <label>lg: 24px</label>
                        <p>区块间距、大元素内边距</p>
                    </div>
                    
                    <div class="form-group">
                        <label>xl: 32px</label>
                        <p>大区块间距、页面边距</p>
                    </div>
                </div>
                
                <div class="card">
                    <h3>圆角系统</h3>
                    <div class="form-group">
                        <label>sm: 4px</label>
                        <p>按钮、输入框、标签</p>
                    </div>
                    
                    <div class="form-group">
                        <label>md: 8px</label>
                        <p>卡片、模态框、通知</p>
                    </div>
                    
                    <div class="form-group">
                        <label>lg: 12px</label>
                        <p>大尺寸卡片、特殊组件</p>
                    </div>
                    
                    <div class="form-group">
                        <label>full: 9999px</label>
                        <p>圆形元素、胶囊按钮</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">
                <i class="fas fa-toggle-on"></i>
                <h2>按钮规范</h2>
            </div>
            
            <div class="card">
                <h3>按钮类型</h3>
                <div class="btn-group">
                    <button class="btn btn-primary">主按钮</button>
                    <button class="btn btn-secondary">次按钮</button>
                    <button class="btn btn-danger">危险按钮</button>
                    <button class="btn btn-success">成功按钮</button>
                    <button class="btn btn-outline">轮廓按钮</button>
                    <button class="btn btn-primary" disabled>禁用状态</button>
                </div>
                
                <div class="code-block">
                    <code>
&lt;button class="btn btn-primary"&gt;主按钮&lt;/button&gt;<br>
&lt;button class="btn btn-secondary"&gt;次按钮&lt;/button&gt;<br>
&lt;button class="btn btn-danger"&gt;危险按钮&lt;/button&gt;
                    </code>
                </div>
            </div>
            
            <div class="card">
                <h3>按钮尺寸</h3>
                <div class="btn-group">
                    <button class="btn btn-primary btn-sm">小按钮</button>
                    <button class="btn btn-primary">默认按钮</button>
                    <button class="btn btn-primary btn-lg">大号按钮</button>
                </div>
                
                <h3>带图标按钮</h3>
                <div class="btn-group">
                    <button class="btn btn-primary"><i class="fas fa-download"></i> 下载文件</button>
                    <button class="btn btn-secondary"><i class="fas fa-cog"></i> 系统设置</button>
                    <button class="btn btn-danger"><i class="fas fa-trash"></i> 删除项目</button>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">
                <i class="fas fa-edit"></i>
                <h2>表单元素</h2>
            </div>
            <div class="grid">
                <div class="card">
                    <h3>文本输入</h3>
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" class="input-field" placeholder="请输入用户名">
                        <p class="form-hint">用户名长度应在3-20个字符之间</p>
                    </div>
                    
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" class="input-field" placeholder="请输入密码">
                    </div>
                    
                    <div class="form-group">
                        <label for="bio">个人简介</label>
                        <textarea id="bio" class="input-field" placeholder="介绍一下你自己..."></textarea>
                    </div>
                </div>
                
                <div class="card">
                    <h3>选择元素</h3>
                    <div class="form-group">
                        <label for="country">国家/地区</label>
                        <select id="country" class="input-field">
                            <option value="">选择国家</option>
                            <option value="us">美国</option>
                            <option value="cn">中国</option>
                            <option value="jp">日本</option>
                        </select>
                    </div>
                    
                    <h3>复选框</h3>
                    <div class="checkbox-group">
                        <input type="checkbox" id="terms">
                        <label for="terms">我同意服务条款</label>
                    </div>
                    
                    <div class="checkbox-group">
                        <input type="checkbox" id="newsletter" checked>
                        <label for="newsletter">订阅新闻邮件</label>
                    </div>
                    
                    <h3>开关</h3>
                    <div class="checkbox-group">
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                        <label>启用通知</label>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">
                <i class="fas fa-bell"></i>
                <h2>通知与模态框</h2>
            </div>
            <div class="grid">
                <div class="card">
                    <h3>通知样式</h3>
                    <div class="notification notification-info">
                        <i class="fas fa-info-circle"></i>
                        <div>
                            <strong>系统信息</strong>
                            <p>您的个人资料已成功更新，新设置已生效。</p>
                        </div>
                    </div>
                    
                    <div class="notification notification-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        <div>
                            <strong>存储警告</strong>
                            <p>您的存储空间使用率已达85%，请及时清理。</p>
                        </div>
                    </div>
                    
                    <div class="notification notification-error">
                        <i class="fas fa-times-circle"></i>
                        <div>
                            <strong>操作失败</strong>
                            <p>文件上传失败，请检查网络连接后重试。</p>
                        </div>
                    </div>
                    
                    <div class="notification notification-success">
                        <i class="fas fa-check-circle"></i>
                        <div>
                            <strong>操作成功</strong>
                            <p>项目已成功创建，您可以开始添加内容。</p>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <h3>模态框</h3>
                    <p>点击按钮查看模态框效果：</p>
                    <div class="btn-group">
                        <button class="btn btn-primary" id="showModalBtn"><i class="fas fa-external-link-alt"></i> 打开模态框</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">
                <i class="fas fa-th"></i>
                <h2>其他组件</h2>
            </div>
            
            <div class="grid">
                <div class="card">
                    <h3>标签</h3>
                    <div class="btn-group">
                        <span class="tag tag-primary">科技</span>
                        <span class="tag tag-secondary">设计</span>
                        <span class="tag tag-success">完成</span>
                        <span class="tag tag-primary">前端</span>
                    </div>
                    
                    <h3>进度条</h3>
                    <label>项目进度 (75%)</label>
                    <div class="progress">
                        <div class="progress-bar progress-primary" style="width: 75%"></div>
                    </div>
                    
                    <label>存储使用 (90%)</label>
                    <div class="progress">
                        <div class="progress-bar progress-danger" style="width: 90%"></div>
                    </div>
                </div>
                
                <div class="card">
                    <h3>分页器</h3>
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="#"><i class="fas fa-chevron-left"></i></a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link active" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#"><i class="fas fa-ellipsis-h"></i></a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a></li>
                    </ul>
                    
                    <h3>卡片网格</h3>
                    <div class="grid-demo">
                        <div>内容区块 1</div>
                        <div>内容区块 2</div>
                        <div>内容区块 3</div>
                        <div>内容区块 4</div>
                        <div>内容区块 5</div>
                        <div>内容区块 6</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">
                <i class="fas fa-lightbulb"></i>
                <h2>开发注意事项</h2>
            </div>
            
            <div class="grid">
                <div class="card">
                    <h3>CSS最佳实践</h3>
                    <ul>
                        <li>使用CSS变量实现主题化，便于维护</li>
                        <li>所有尺寸使用rem单位，确保可访问性</li>
                        <li>使用BEM命名规范或CSS模块化方案</li>
                        <li>避免使用!important，保持样式可覆盖性</li>
                        <li>使用CSS过渡动画增强交互体验</li>
                    </ul>
                </div>
                
                <div class="card">
                    <h3>组件开发要求</h3>
                    <ul>
                        <li>完整实现组件所有状态（正常、悬停、激活、禁用）</li>
                        <li>确保组件可访问性（ARIA属性、键盘导航）</li>
                        <li>提供完整的API文档和示例</li>
                        <li>实现响应式设计，适配不同屏幕尺寸</li>
                        <li>添加必要的动画和过渡效果</li>
                    </ul>
                </div>
                
                <div class="card">
                    <h3>性能优化</h3>
                    <ul>
                        <li>避免不必要的DOM操作和重绘</li>
                        <li>使用CSS硬件加速优化动画性能</li>
                        <li>图标使用SVG或字体图标，避免位图</li>
                        <li>按需加载组件和资源</li>
                        <li>压缩生产环境CSS和JavaScript</li>
                    </ul>
                </div>
                
                <div class="card">
                    <h3>测试要求</h3>
                    <ul>
                        <li>跨浏览器测试（Chrome, Firefox, Safari, Edge）</li>
                        <li>移动设备测试（iOS, Android）</li>
                        <li>无障碍访问测试（WCAG 2.1 AA标准）</li>
                        <li>性能测试（Lighthouse评分）</li>
                        <li>深色/浅色模式切换测试</li>
                    </ul>
                </div>
            </div>
        </div>
        
       
    </div>
    
    <!-- 模态框 -->
    <div class="modal" id="exampleModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>系统通知</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>您即将进行重要操作，请确认您了解此操作的后果。</p>
                <p>所有更改将立即生效且无法撤销。</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary close-modal">取消</button>
                <button class="btn btn-danger">确认操作</button>
            </div>
        </div>
    </div>
    
    <script>
        // 模态框控制逻辑
        const modal = document.getElementById('exampleModal');
        const showModalBtn = document.getElementById('showModalBtn');
        const closeModalBtns = document.querySelectorAll('.close-modal');
        
        showModalBtn.addEventListener('click', () => {
            modal.style.display = 'flex';
            setTimeout(() => {
                modal.classList.add('show');
            }, 10);
        });
        
        closeModalBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                modal.classList.remove('show');
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 300);
            });
        });
        
        // 点击模态框外部关闭
        window.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.classList.remove('show');
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 300);
            }
        });
    </script>
</body>
</html>